<template>
  <div class="app-container">
    <el-button
        type="primary"
        plain
        icon="el-icon-view"
        size="mini"
        @click="clickView()"
    >全文预览</el-button>
    <el-button
        type="primary"
        plain
        icon="el-icon-view"
        size="mini"
        @click="formView()"
    >工程量清单预览</el-button>
    <el-table v-loading="loading" :data="resultDetailList">
      <el-table-column label="左文件页数" align="center" prop="leftNum" />
      <el-table-column label="右文件页数" align="center" prop="rightNum" />
      <el-table-column label="重合字数" align="center" prop="preNum" />
      <el-table-column label="高亮内容" align="center" prop="lightWord" />
      <el-table-column label="重复内容" align="center" prop="preWord" />
      <el-table-column label="备注" align="center" prop="remark" />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import {getResult, downLoadResult,formExist,previewResult1, previewResult } from "@/api/system/result";
  
  export default {
    name: "ResultDetail",
    data() {
      return {
        id: "",
        resultId: "",
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 比对结果详情表格数据
        resultDetailList: [],
        // 是否https字典
        isHttpsOptions: [],
        // 状态(0正常 1停用)字典
        statusOptions: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          id:undefined,
          resultId: undefined,
          leftName: undefined,
          leftNum: undefined,
          rightName: undefined,
          rightNum: undefined,
          preNum: undefined,
          lightWord: undefined,
          preWord: undefined,
        },
      };
    },
    created() {
      this.queryParams.resultId = this.$route.query.id;
      this.getList();
    },
    methods: {
      //预览文件
      clickView(){
        const loading = this.$loading({
          lock: true,
          text: '正在打开，请勿操作',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        //接口函数传入id,返回的文件流
        previewResult(this.resultDetailList[0].id).then(data => {
          var binaryData = [];
          binaryData.push(data);
          let url = window.URL.createObjectURL(
              new Blob(binaryData, {
              type: "application/pdf;charset=utf-8",
              })
          );
          //接口函数传入id,返回的文件流
          previewResult1(this.resultDetailList[0].id).then(data => {
            var binaryData1 = [];
            binaryData1.push(data);
            let url1 = window.URL.createObjectURL(
                new Blob(binaryData1, {
                type: "application/pdf;charset=utf-8",
                })
            );
            loading.close();
            // vue路由跳转并以问号形式携带vue-pdf预览时所需要的pdf地址
            const { href } = this.$router.resolve({
              path: "/system/oss/viewPDF",
              query: {
                  //要传的参数
                  url: url,
                  url1: url1,
                  resultId: this.queryParams.resultId,
              },
            });
            window.open(href, '_blank');
          });
        });
      },
      //预览文件
      formView(){
        this.loading = true;
        formExist(this.resultDetailList[0].id).then(response=>{
          this.loading = false;
          if(response.data == null){
            this.$message('文件不存在');
          }else{
            // vue路由跳转并以问号形式携带vue-pdf预览时所需要的pdf地址
            const { href } = this.$router.resolve({
              path: "/system/oss/formPDF",
              query: {
                  //要传的参数
                  id: this.resultDetailList[0].id,
              },
            });
            window.open(href, '_blank');
          }
        });
      },
      // 下载
      downLoad() {
        downLoadResult().then((response) => {
          const blob = new Blob([response]); // 把得到的结果用流对象转一下
          var a = document.createElement("a"); //创建一个<a></a>标签
          a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
          a.download = `${new Date().getTime()}_比对结果.pdf`; //设置文件名
          a.style.display = "none"; // 障眼法藏起来a标签
          document.body.appendChild(a); // 将a标签追加到文档对象中
          a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
          a.remove(); // 一次性的，用完就删除a标签
        });
      },
      /** 查询对象存储配置列表 */
      getList() {
        this.loading = true;
        getResult(this.queryParams).then(response=>{
          this.resultDetailList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
    },
  };
  </script>